<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/base.js"></script>
</head>
<body>
    <h3>手机号一键登录</h3>
    <input id="telephone" placeholder="请输入手机号"/><br>
    <input id="code" placeholder="请输入验证码"/><button onclick="return sendSms(); ">获取验证码</button>
    <br>
    <button onclick="return signIn();">登录</button>
    <br>
    <button onclick="return onTestClick();">测试登陆效果</button>
    <script>
        function onTestClick(){
            //希望带着token请求服务器
            $.rest("post","http://localhost:9001/qf/user/test",null,function(r){
                alert(r.result);
            });
            return false;
        }
        function signIn(){
            let url="http://localhost:9001/qf/user/oneKeySignIn";
            let requestJson={};
            requestJson.phoneNo=document.getElementById("telephone").value;
            requestJson.code=document.getElementById("code").value;
            $.rest("post",url,requestJson,function (r) {
                if (r.ok){
                    /**
                     * {
                       "code": 200,
                       "msg": "登陆成功",
                       "result": {
                           "user": {
                               "id": 1,
                               "username": "zhangsan",
                               "nickname": "张三",
                               "gender": "男",
                                "telephone": "15911135712",
                                "email": "zhangsan@qq.com",
                                "iconLink": ""
                            },
                            "token": "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiLlvKDkuIkiLCJpYXQiOjE2NDg3Nzc2ODcsImV4cCI6MTY0ODc3OTQ4NywidXNlciI6IntcImVtYWlsXCI6XCJ6aGFuZ3NhbkBxcS5jb21cIixcImdlbmRlclwiOlwi55S3XCIsXCJpY29uTGlua1wiOlwiXCIsXCJpZFwiOjEsXCJuaWNrbmFtZVwiOlwi5byg5LiJXCIsXCJ0ZWxlcGhvbmVcIjpcIjE1OTExMTM1NzEyXCIsXCJ1c2VybmFtZVwiOlwiemhhbmdzYW5cIn0ifQ.eCtoJ6RFRIUKOBWjibw6KP7Zl5p1WdFBkvw84S9CS68"
                        },
                       "ok": true
                    }
                     */
                    let token=r.result.token;
                    let id=r.result.user.id;
                    let username=r.result.user.username;
                    let nickname=r.result.user.nickname;
                    let gender=r.result.user.gender;
                    let telephone=r.result.user.telephone;
                    let email=r.result.user.email;
                    let iconLink=r.result.user.iconLink;

                    //前端开始保存数据，
                    //各种类型的前端都有自己保存数据的技术，后端不需要操心。
                    //Android或者iOS 把数据存在SQLite，这是一个前端的数据库。
                    //H5把数据存在localStorage或者sessionStorage里。
                    localStorage.setItem("token",token);
                    localStorage.setItem("id",id);
                    localStorage.setItem("username",username);
                    localStorage.setItem("nickname",nickname);
                    localStorage.setItem("gender",gender);
                    localStorage.setItem("telephone",telephone);
                    localStorage.setItem("email",email);
                    localStorage.setItem("iconLink",iconLink);
                    alert("登陆成功");
                }else{
                    alert("登陆失败了");
                }
            });
        }
        function sendSms(){


            //获取手机号
            let phone=document.getElementById("telephone").value;
            //请求服务器
            let url="http://localhost:9001/qf/user/sms";
            let requestJson={};
            requestJson.phoneNo=phone;
            $.rest("post",url,requestJson,function (r) {
                if (r.ok){
                    alert("验证码已经发送");
                }
            });
            return false;
        }
    </script>
</body>
</html>